/*
 * @Author: HuangYue
 * @Date: 2022-05-08 16:21:58
 * @LastEditors: HuangYue
 * @LastEditTime: 2022-05-09 01:56:53
 * @FilePath: /graduation/src/components/DeviceDetail/DeviceVisualization/index.jsx
 * @Description:
 */
import React from 'react';
import moment from 'moment';
import { Row, Col, Card, DatePicker } from 'antd';
const { RangePicker } = DatePicker;
import ChartCard from '../../../pages/DataVisualization/components/ChartCard';
import { GridContent } from '@ant-design/pro-layout';
import DemoGauge from './components/Gauge';
import DemoLiquid from './components/Liquid';
import DemoColumn from './components/Column';
import { randomNumber } from '../../../util/random';
function DeviceVisualization() {
  const getData = (x, y) => x + Number(Math.random() * (y - x));
  const ColumnData = [];
  const beginDay = new Date().getTime();
  for (let i = 30; i >= 0; i -= 1) {
    ColumnData.push({
      time: moment(new Date(beginDay - 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
      count: Number(randomNumber(2)),
    });
  }
  return (
    <GridContent>
      <>
        <Row gutter={24}>
          <Col xl={12} lg={24} md={24} sm={24} xs={24}>
            <ChartCard title="网络连接状态">
              <DemoGauge data={getData(0.34, 0.9)} />
            </ChartCard>
          </Col>
          <Col xl={12} lg={24} md={24} sm={24} xs={24}>
            <ChartCard title="设备运行状态">
              <DemoLiquid data={getData(0.2, 0.9)} />
            </ChartCard>
          </Col>
        </Row>
        <Row gutter={24} style={{ marginTop: 24 }}>
          <Col xl={24} lg={24} md={24} sm={24} xs={24}>
            <Card
              title="设备近30天数据上传量"
              extra={
                <RangePicker
                  bordered={false}
                  defaultValue={[
                    moment(ColumnData[0].time, 'YYYY-MM-DD'),
                    moment(ColumnData[30].time, 'YYYY-MM-DD'),
                  ]}
                  disabled
                />
              }
            >
              <DemoColumn data={ColumnData} />
            </Card>
          </Col>
        </Row>
      </>
    </GridContent>
  );
}

export default DeviceVisualization;
